<html>
<head>
    <title>Mocha Tests for Simi</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <link rel="stylesheet" href="mocha.css" />
    <script src="jquery.min.js" type="text/javascript"></script>
    <script src="underscore-min.js"></script>
    <script src="mocha.js"></script>
    <script src="chai.js"></script>

    <script src="../simi.js"></script>

    <style>
        .wrong{background-color:red}
        #results{
            border:1px solid black;
        }

    </style>

    <script>
		var img1 = $('images/matches/source.jpg');
		var img2 = $('images/matches/crop.jpg')
	
		// returns a difference rate (from 0 to 1)
		simi.compare(img1, img2);

		// returns true or false (same as compare with a default threshold)
		simi.same(img1, img2);

		// returns a hash of the image
		// simi.hash could be invoked to cache the hash
		var hash = simi.hash(img1);
		simi.compare(hash, img2); // only img2 will be hashed
	
	
	
        var assert = chai.assert;
        mocha.setup('bdd');

        _.templateSettings = {
            interpolate : /\{\{(.+?)\}\}/g
        };

        var matchTests = {
            'wrong'       : false,
            'desaturation': true,
            'blur'        : true,
            'crop'        : true,
            'rotation'    : true,
            'compression' : true,
            'scale'       : true,
            'mix'         : true
        };

        $(function(){
            var itemTemplate = _.template($('#item-template').val());
            var table = '<table id="results">';

            _(matchTests).each(function(shouldMatch, testName){
                table += itemTemplate({
                    id: testName,
                    source: 'images/matches/source.jpg',
                    comparison: 'images/matches/'+testName+'.jpg'
                });
            });

            table += '</table>';
            $('body').prepend(table);
        });

        describe("simi", function () {
            describe("match", function(){
                _(matchTests).each(function(shouldMatch, testName){
                    it((shouldMatch ? 'should' : 'should NOT') + ' match image "' + testName + '"', function(){
                        var tr = $('#'+testName);
                        var result = simi.compare(tr.find('.source')[0], tr.find('.comparison')[0]);
                        var matches = result <= 0.15;

                        tr.find('.match').html(Math.round((result * 100)));
                        tr.find('.name').html(testName);
                        if(!matches){
                            tr.addClass('wrong');
                        }

                        // logical XOR
                        if( matches ? shouldMatch : !shouldMatch ){
                            assert.ok(true);
                        }else{
                            assert.fail('Unexpected result');
                        }
                    });
                });
            });
        });

        window.onload = function(){
            if (window.mochaPhantomJS) {
                mochaPhantomJS.run()
            }else{
                mocha.run();
            };
        };

    </script>
    <script src="simi.js"></script>
</head>
<body>
    <textarea id="item-template" style="display:none">
        <tr id="{{id}}">
            <td><img class='source' src="{{source}}"/></td>
            <td><img class='comparison' src="{{comparison}}"/></td>
            <td class="match"></td>
            <td class="name"></td>
        </tr>
    </textarea>
    <div id="mocha"></div>
</body>
</html>
